(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
var socket = io.connect('http://localhost:8080');      // 建立一个socket连接
var Times = [];     // 时间
var Temps = [];     // 温度
var Hums = [];      // 湿度
var Smokes = [];    // 烟雾浓度

var num1 = 0, num2 = 0, num3 = 0, num4 = 0, num5 = 0;
var Temps_Int = []

socket.on('news', function (data) {
    for (var i = 0; i < data.datas.length; i++) {
        Times.push(data.datas[i].Time)
        Temps.push(data.datas[i].Temp)
        Hums.push(data.datas[i].Hum)
        Smokes.push(data.datas[i].Smoke)
    }
    // 将字符型的Temps转换为整型
    Temps.forEach(function (data, index, array) {
        Temps_Int.push(+data);
    })
    // 判断温度范围概率
    for (var i = 0; i < Temps_Int.length; i++) {
        if (Temps_Int[i] < 20) {
            num1++;
        } else if (Temps_Int[i] >= 20 && Temps_Int[i] <= 25) {
            num2++;
        } else if (Temps_Int[i] >= 26 && Temps_Int[i] <= 30) {
            num3++;
        } else if (Temps_Int[i] >= 31 && Temps_Int[i] <= 40) {
            num4++;
        } else if (Temps_Int[i] > 40) {
            num5++;
        }
    }
    // console.log('Temps:',Temps)
    // console.log('Hums:',Hums)

    // 调用函数
    bar()
    line()
    pie()
    bar1()
    line1()
    pie1()
    // 每一轮使用完之后将所有变量清空
    Times = [];
    Temps = [];
    Hums = [];
    Smokes = [];
    Temps_Int = [];
    num1 = 0, num2 = 0, num3 = 0, num4 = 0, num5 = 0;
});


// 监测当天的温湿度
function line() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.line .chart'));

    // 2. 指定配置和数据
    var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            // 通过坐标轴来触发
            trigger: 'axis',
        },
        legend: {
            // 折线图文字距离容器10%
            right: '10%',
            // 修饰图例文字的颜色
            textStyle: {
                color: '#4c9bfd',
            },
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["温度", "湿度"]
        },
        grid: {
            left: '0%',
            top: '30px',
            right: '10px',
            bottom: '0%',
            show: true,
            borderColor: '#012f4a',
            containLabel: true,
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
                '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00',
            ],
            // 去除刻度
            axisTick: {
                show: false,
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: '12',
                },
            },
            // 去除x坐标轴的颜色
            axisLine: {
                // 是否显示坐标轴轴线。
                show: false,
            },
        },
        yAxis: {
            type: 'value',
            // 去除刻度
            axisTick: {
                show: false,
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: '12',
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                },
            },
            // 修改y轴分割线的颜色
            splitLine: {
                // 网格线
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                },
            },
        },
        series: [
            {
                name: '温度',
                type: 'line',
                // stack: '总量',      // stack 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
                smooth: true,       // 是否平滑曲线显示
                data: Temps,
            },
            {
                name: '湿度',
                type: 'line',
                // stack: '总量',
                smooth: true,
                data: Hums,
            },
        ],
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);

    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

// 监测每日各温度出现的次数（概率）
function pie() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.pie .chart'));

    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}次 ({d}%)',
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            },
        },
        legend: {
            top: '90%',
            itemWidth: 10,
            itemHeight: 10,
            data: ['20°C以下', '20-25°C', '26-30°C', '31-40°C', '40°C以上'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: '12',
            },
        },
        series: [
            {
                name: '温度分布',
                type: 'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                color: [
                    '#1089E7',
                    '#ed8884',
                    '#0682ab',
                    '#F8B448',
                    '#06a0ab',
                ],
                // 显示饼图外的提示信息
                label: {show: true},
                labelLine: {show: true},
                data: [
                    // value 代表出现的次数
                    {value: num1, name: '20°C以下'},
                    {value: num2, name: '20-25°C'},
                    {value: num3, name: '26-30°C'},
                    {value: num4, name: '31-40°C'},
                    {value: num5, name: '40°C以上'},
                ],
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

// 监测日平均温湿度
function line1() {
// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.line1 .chart'));

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dddc6b',
                },
            },
        },
        legend: {
            top: '0%',
            right: '10%',
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: '12',
            },
        },
        grid: {
            left: '0',
            top: '30px',
            right: '10px',
            bottom: '0',
            containLabel: true,
        },

        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)',
                    },
                },

                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14',
                    '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
                    '28', '29', '30',],
            },
            {
                axisPointer: {show: false},
                axisLine: {show: false},
                position: 'bottom',
                offset: 20,
            },
        ],

        yAxis: [
            {
                type: 'value',
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 12,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                    },
                },
            },
        ],
        series: [
            {
                name: '平均温度',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: '#0184d5',
                        width: 2,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 132, 213, 0.4)',
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(1, 132, 213, 0.1)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#0184d5',
                        borderColor: 'rgba(221, 220, 107, .1)',
                        borderWidth: 12,
                    },
                },
                // 数据，后期动态输入
                data: [
                    30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30,
                    40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40,
                ],
            },
            {
                name: '平均湿度',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: '#00d887',
                        width: 2,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 216, 135, 0.4)',
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(0, 216, 135, 0.1)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#00d887',
                        borderColor: 'rgba(221, 220, 107, .1)',
                        borderWidth: 12,
                    },
                },
                // 数据，后期动态输入
                data: [
                    50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50,
                    60, 10, 50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10,
                    40,
                ],
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

// 监测区域烟雾浓度
function bar1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.bar1 .chart'));

    var data = [70, 34, 60, 78, 69];
    var titlename = ['区域1', '区域2', '区域3', '区域4', '区域5'];
    var valdata = [702, 350, 610, 793, 664];
    var myColor = [
        '#1089E7',
        '#F57474',
        '#56D0E3',
        '#F8B448',
        '#8B78F6'];
    option = {
        //图表位置
        grid: {
            top: '30px',
            right: '10%',
            left: '10%',
            bottom: '0',
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
                show: true,
                // 纵坐标数据
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',

                    rich: {
                        lg: {
                            backgroundColor: '#339911',
                            color: '#fff',
                            borderRadius: 15,
                            // padding: 5,
                            align: 'center',
                            width: 15,
                            height: 15,
                        },
                    },
                },
            },
            // 右边数值显示 show
            {
                show: false,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
            },
        ],
        series: [
            {
                name: '条',
                type: 'bar',
                // yAxisIndex: 多个y轴时使用  默认是0
                yAxisIndex: 0,
                data: data,
                // barCategoryGap ： 用于设置不同类目之间的间距
                barCategoryGap: 50,
                // 柱体宽度
                barWidth: 12,
                itemStyle: {
                    normal: {
                        //  barBorderRadius 设置柱体的弧度
                        barBorderRadius: 20,
                        color: function (params) {
                            var num = myColor.length;
                            // 返回颜色
                            return myColor[params.dataIndex % num];
                        },
                    },
                },
                // 内嵌百分比显示
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%',
                    },
                },
            },
            // 外框设置
            {
                name: '框',
                type: 'bar',
                yAxisIndex: 1,
                barCategoryGap: 50,
                // 长度数据设置
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: 'none',
                        borderColor: '#00c1de',
                        borderWidth: 3,
                        barBorderRadius: 15,
                    },
                },
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

function bar() {

    // 实例化对象 初始化echarts实例
    var myChart = echarts.init(document.querySelector('.bar .chart'));
    // 指定配置和数据
    var option = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        grid: {
            left: '0%',
            top: '30px',
            right: '0%',
            bottom: '0%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                data: [
                    '旅游行业',
                    '教育培训',
                    '游戏行业',
                    '医疗行业',
                    '电商行业',
                    '社交行业',
                ],
                axisTick: {
                    // 横坐标 X 轴刻度 alignWithLabel
                    alignWithLabel: true,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: '12',
                    },
                },
                axisLine: {
                    // 是否显示坐标轴轴线。
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: '12',
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                    },
                },
                splitLine: {
                    // 网格线
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                    },
                },
            },
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '35%',
                data: Temps,
                itemStyle: {
                    barBorderRadius: 5,
                },
            },
        ],
    };

    // 把配置给实例对象 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // onresize 事件会在窗口或框架被调整大小时发生。
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

function pie1() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector('.pie1  .chart'));
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: '90%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: '12',
            },
        },
        tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b} : {c} ({d}%)',
            formatter: '{a} <br/>{b} : {d}%',

        },
        // 注意颜色写的位置
        color: [
            '#006cff',
            '#60cda0',
            '#ed8884',
            '#ff9f7f',
        ],
        series: [
            {
                name: '烟雾浓度',
                type: 'pie',
                // 如果radius是百分比则必须加引号
                radius: '55%',
                roseType: 'radius',
                data: [
                    {value: 25, name: '区域1'},
                    {value: 35, name: '区域2'},
                    {value: 30, name: '区域3'},
                    {value: 20, name: '区域4'},
                ],
            },
        ],
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
}

},{}]},{},[1]);
